{extend name="layout" /}
{block name="content"}
<div class="main">
    <div class="headerbanner">
        <div class="headerbanner-img">
            <img src="__STATIC__/images/item1/item01.jpg" />
        </div>
        <div class="crumbs">
            <div class="container">
                <div class="row">
                    <div class="left">
                        <span class="icon iconfont icon-shouye"></span>
                        <span>业务布局 > 商业地产</span>
                    </div>
                    <!-- <div class="right">
                        <a class="active" href="javascript:;">重要新闻</a>
                        <a href="javascript:;">项目动态</a>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
    <div class="contact">
        <div class="container">
            <div class="row">
                <div class="banner-title"><img src="{$project.img}" width="303" height="79" /></div>
                <div class="swiper-container gallery-top">
                    <div class="swiper-wrapper">
                        {volist name="project.imgs" id="vo"}
                        <div class="swiper-slide" style="height: auto;"><img src="{$vo.img}"></div>
                        {/volist}
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>
                <div class="swiper-container gallery-thumbs">
                    <div class="swiper-wrapper">
                        {volist name="project.imgs" id="vo"}
                        <div class="swiper-slide" style="height: auto;"><img src="{$vo.img}"></div>
                        {/volist}
                    </div>
                </div>
                <div class="text">
                    <ul>
                        <li>{$project.name}</li>
                        <li> 参考均价:  {$project.price}</li>
                        <li>交房时间:  {$project.project_status}</li>
                        <li>物业类别:  {$project.wuye}</li>
                        <li>项目地址:  {$project.address}</li>
                        <li>项目特色:  {$project.type}</li>
                    </ul>
                    <p>{$project.description}</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        loop:true,
        loopedSlides: 5, //looped slides should be the same
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 4,
        touchRatio: 0.2,
        loop: true,
        loopedSlides: 5, //looped slides should be the same
        slideToClickedSlide: true,
    });
    galleryTop.controller.control = galleryThumbs;
    galleryThumbs.controller.control = galleryTop;

</script>
{/block}